<template>
  <div class="card-list">
    <a-list>
      <a-row :gutter="16">
        <a-col :span="6">
          <a-list-item>
            <a-button class="new-btn" type="dashed" @click="handleAdd">
              <a-icon type="plus" />
              新增应用
            </a-button>
          </a-list-item>
        </a-col>
        <template v-for="item in dataSource" :key="item.title">
          <a-col :span="6">
            <a-list-item>
              <a-card :hoverable="true" :class="`${prefixCls}__card`">
                <template #actions>
                  <a-tooltip title="配置">
                    <a-icon type="setting" @click="handleSetting(item)" />
                  </a-tooltip>
                  <a-tooltip title="编辑">
                    <a-icon type="edit" @click="handleEdit(item)" />
                  </a-tooltip>
                  <a-tooltip title="删除">
                    <a-icon type="delete" @click="handleDelete(item.id)" />
                  </a-tooltip>
                </template>
                <a-card-meta :title="item.name" :description="item.description">
                  <template #avatar>
                    <a-avatar :src="item.icon" />
                  </template>
                </a-card-meta>
              </a-card>
            </a-list-item>
          </a-col>
        </template>
      </a-row>
    </a-list>
    <ApplicationModal @register="register" @success="loadData" />
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { Modal, message } from 'ant-design-vue';
  import { getApplicationList, deleteApplication } from '/@/api/application';
  import ApplicationModal from './components/ApplicationModal.vue';
  import { useModal } from '/@/components/Modal';
  import type { Application } from '/@/api/application/model';

  const prefixCls = 'list-card';
  const router = useRouter();
  const dataSource = ref<Application[]>([]);

  const [register, { openModal }] = useModal();

  const loadData = async () => {
    dataSource.value = await getApplicationList();
  };

  const handleAdd = () => {
    openModal(true, {
      isUpdate: false,
    });
  };

  const handleEdit = (record: Recordable) => {
    openModal(true, {
      record,
      isUpdate: true,
    });
  };

  const handleSetting = (record: Recordable) => {
    router.push({ path: '/application/menu', query: { id: record.id } });
  };

  const handleDelete = (id: string) => {
    Modal.confirm({
      title: '确认操作',
      content: '是否删除此应用',
      onOk: async () => {
        await deleteApplication(id);
        message.success('删除应用成功');
        loadData();
      },
    });
  };

  loadData();
</script>

<style lang="less" scoped>
  .card-list {
    padding: 10px;

    :deep(.ant-list-item) {
      height: 168px;

      border-radius: 8px;
      .ant-card-actions {
        li > span:first-child {
          display: inline-block;
        }
      }
    }

    .new-btn {
      width: 100%;
      height: 100%;
    }

    .list-card {
      &__link {
        margin-top: 10px;
        font-size: 14px;

        a {
          margin-right: 30px;
        }

        span {
          margin-left: 5px;
        }
      }

      &__card {
        display: flex;
        flex-direction: column;

        width: 100%;
        height: 100%;

        :deep(.ant-card-body) {
          flex-grow: 1;

          padding: 16px;
        }

        &-title {
          margin-bottom: 5px;
          font-size: 16px;
          font-weight: 500;
          color: @text-color;

          .icon {
            margin-top: -5px;
            margin-right: 10px;
            font-size: 38px !important;
          }
        }

        &-detail {
          padding-top: 10px;
          padding-left: 30px;
          font-size: 14px;
          color: @text-color-secondary;
        }
      }
    }
  }
</style>
